<template>
  <el-form>
    <el-form-item label="账号">
      <el-input v-model.trim="account_copy.account" disabled />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="account_copy.password" />
    </el-form-item>
    <el-form-item label="权限">
      <el-select v-model="account_copy.role" style="width:100%;">
        <el-option
          v-for="item in roleArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model.trim="account_copy.userName" />
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.trim="account_copy.age" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model.trim="account_copy.email" />
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model.trim="account_copy.phone" />
    </el-form-item>
    <el-form-item label="地址" style="margin-top:15px;">
      <v-distpicker
        :province="account_copy.province"
        :city="account_copy.city"
        :area="account_copy.county"
        style="width:100%;"
        @selected="handleAddressSelect"
      />
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input v-model.trim="account_copy.location" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="account_copy.sex">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :disabled="formFlag || addressFlag" @click="submit">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import VDistpicker from 'v-distpicker'
import { getLngLat } from '@/api/geoCode'

export default {
  components: {
    VDistpicker
  },
  props: {
    account: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      account_copy: {
        account: '',
        age: '',
        city: '',
        county: '',
        email: '',
        lat: '',
        lng: '',
        location: '',
        phone: '',
        province: '',
        role: '',
        password: '',
        sex: '',
        userName: ''
      },
      roleArr: [
        {
          label: '超管账号',
          value: 0
        }, {
          label: '基地管理账号',
          value: 1
        }, {
          label: '普通用户账号',
          value: 2
        }, {
          label: '企业管理账号',
          value: 4
        }
      ]
    }
  },
  computed: {
    formFlag() {
      return (this.account_copy.account === this.account.account &&
              this.account_copy.age === this.account.age &&
              this.account_copy.city === this.account.city &&
              this.account_copy.county === this.account.county &&
              this.account_copy.email === this.account.email &&
              this.account_copy.location === this.account.location &&
              this.account_copy.phone === this.account.phone &&
              this.account_copy.province === this.account.province &&
              this.account_copy.role === this.account.role &&
              this.account_copy.sex === this.account.sex &&
              this.account_copy.userName === this.account.userName &&
              this.account_copy.password === this.account.password)
    },
    addressFlag() {
      return (this.account_copy.province === '省' ||
              this.account_copy.city === '市' ||
              this.account_copy.county === '区' ||
              this.account_copy.location === '')
    }
  },
  watch: {
    account: {
      handler(newValue) {
        Object.assign(this.account_copy, newValue)
        // for (var key in newValue) {
        //   this.account_copy[key] = newValue[key]
        // }
      },
      deep: true
    }
  },
  methods: {
    submit() {
      this.$confirm('确定修改帐号信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('admin-update-account', {
          account: this.account_copy.account,
          userName: this.account_copy.userName,
          email: this.account_copy.email,
          phone: this.account_copy.phone,
          province: this.account_copy.province,
          city: this.account_copy.city,
          county: this.account_copy.county,
          location: this.account_copy.location,
          lat: this.account_copy.lat,
          lng: this.account_copy.lng,
          sex: this.account_copy.sex,
          age: Number.parseInt(this.account_copy.age),
          role: Number.parseInt(this.account_copy.role),
          password: this.account_copy.password
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
      // this.$message({
      //   message: 'User information has been updated successfully',
      //   type: 'success',
      //   duration: 5 * 1000
      // })
    },
    handleAddressSelect(address) {
      const account = this.account_copy
      account.province = address.province.value
      account.city = address.city.value
      account.county = address.area.value
      const keyWord = account.province + account.city + account.county + account.location
      getLngLat(keyWord)
        .then(async response => {
          const location = response.location
          account.lat = Number.parseFloat(location.lat)
          account.lng = Number.parseFloat(location.lon)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
